<template>
  <div ref="container" class="wrapper">
    <div>
      <!--header组件-->
      <div class="header">
        <div class="header-left">
          <router-link to="/">
            <span class="iconfont"> &#xe8a4; </span>
          </router-link>
        </div>
        <div class="header-title">城市选择</div>
      </div>
      <!--hot组件-->
      <div class="hot">
        <div class="hot-title">热门城市</div>
        <ul class="hot-list">
          <li
            class="hot-item"
            v-for="item in hotCityList"
            :key="item.id"
            @click="changCityName(item.cityName)"
          >
            {{ item.cityName }}
          </li>
        </ul>
      </div>
      <!--sort组件-->
      <div class="sort">
        <div class="sort-title">字母排序</div>
        <ul class="sort-list">
          <li
            class="sort-item"
            v-for="(item, key) of cityList"
            :key="key"
            @click="changeSort(item.title)"
          >
            {{ item.title }}
          </li>
        </ul>
      </div>
      <!--list组件-->
      <div class="list">
        <div v-for="(val, i) in cityList" :key="i" :ref="val.title">
          <div class="list-title">{{ val.title }}</div>
          <ul class="list-msg">
            <li
              class="list-item"
              v-for="item in val.lists"
              :key="item.id"
              @click="changCityName(item)"
            >
              {{ item }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import BScroll from "better-scroll";
// import func from "vue-editor-bridge";
export default {
  props: ["hotCityList", "cityList"],
  data() {
    return {
      scroll: "",
    };
  },
  // watch: {
  //   cities() {
  //     this.$nextTick(function () {
  //       this.scroll.refresh();
  //     });
  //   },
  // },
  mounted() {
    let container = this.$refs["container"];
    this.scroll = new BScroll(container, { observeDOM: true });
    // this.scroll.refresh();
    // this.$nextTick(() => {
    //   this.scroll = new BScroll(this.$refs.container, { observeDOM: true });
    // });
  },
  methods: {
    changeSort(sortName) {
      // console.log(this.$refs[sortName]);
      // console.log(sortName);
      this.scroll.scrollToElement(this.$refs[sortName][0]);
    },
    changCityName(cityname) {
      // alert(cityname);
      this.changeCity(cityname);
      this.$router.push("/");
    },
    ...mapMutations(["changeCity"]),
  },
};
</script>

<style scoped lang="stylus">
@import '~@/assets/css/var.styl'
 .wrapper{
   position: absolute;
  overflow: hidden;
  bottom: 0;
  right: 0;
  top: 0;
  left: 0;
  background: rgb(244, 244, 244);
 }
.header {
  width: 100%;
  line-height: 0.88rem;
  background: $bgColor;
  color: $textColor;
  font-size: 0.36rem;

}
.header-left {
  width: 0.4rem;
  padding: 0 0.2rem;
  text-align: center;
  font-weight: bold;
  position: absolute
}
.header-left a{
    color: #fff
}
.header-title{
    text-align: center;
    font-size:.32rem;
}

.hot-title {
  font-size: 0.3rem;
  color: #212121;
  padding: 0.3rem;
}
.hot-list {
  position: relative;
  overflow: hidden;
  background: #fff;
  font-size: 0.28rem;
  color: #212121;
}
.hot-list::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 33.3333%;
  left: 33.3333%;
  border-left: 00.02rem solid #ddd;
  border-right: 0.02rem solid #ddd;
}
.hot-item {
  position relative
  width: 33.3333%;
  text-align: center;
  height: 0.9rem;
  line-height: 0.9rem;
  float: left;
  border-bottom: 0.02rem #ddd solid;
}
.list-title {
  font-size: 0.26rem;
  color: #212121;
  padding: 0.2rem 0.3rem;
}
.list-msg {
  overflow: hidden;
  position: relative;
  background: #fff;
}
.list-msg ::before {
  content: "";
  position: absolute;
  left: 0%;
  width: 0%;
  height: 100%;
  border-left: 0.02rem solid #ddd;
  border-right: 0.02rem solid #ddd;
}
.list-msg ::after {
  content: "";
  position: absolute;
  left: 100%;
  width: 25%;
  height: 100%;
  border-left: 0.02rem solid #ddd;

 }
.list-item {
  position relative
  font-size: 0.28rem;
  width: 25%;
  text-align: center;
  line-height: 0.9rem;
  float: left;
  border-bottom: 0.02rem solid #ddd;
  textOverflow();
}
.sort-title {
  font-size: 0.26rem;
  color: #212121;
  padding: 0.2rem 0.3rem;
}
.sort-list {
  position: relative;
  overflow: hidden;
  background: #fff;
  font-size: 0.28rem;
  color: #212121;
}

.sort-item {
  width: 16.666%;
  text-align: center;
  height: 0.9rem;
  line-height: 0.9rem;
  float: left;
}
</style>
